<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back">
        <image class="back" src="/static/img/back.png"></image>
      </view>
      <view>
        {{ returnTitle() }}
      </view>
      <view @click="show_search = true" class="filter_title">
        <image class="select" src="/static/img/filter.png"></image>
      </view>
    </view>
    <view class="content_box">
      <view class="action" v-if="listTypeID == 2 && approval">
        <u-button
          type="primary"
          plain
          size="medium"
          :ripple="true"
          @click="selectAll"
          >全选</u-button
        >
        <u-button
          type="primary"
          plain
          size="medium"
          :ripple="true"
          @click="checkOrder(1)"
          >审批通过</u-button
        >
        <u-button
          type="primary"
          plain
          size="medium"
          :ripple="true"
          @click="checkOrder(2)"
          >审批不通过</u-button
        >
      </view>
      <view style="padding: 5px" v-if="listTypeID == 5">
        <u-button
          type="error"
          style="width: 100%"
          plain
          size="medium"
          :ripple="true"
          @click="deleteOrder(1)"
          >删除</u-button
        >
      </view>
      <view class="my-work ac" v-if="listTypeID == 1">
        <view class="menu" style="width: 100vh">
          <u-tabs
            item-width="25%"
            :list="workList"
            :current="current"
            @change="change"
          ></u-tabs>
        </view>
      </view>
      <!-- <view class="search" v-if="listTypeID == 3 || listTypeID == 4">
				<u-search @search="search" action-text="查询" placeholder="搜索施工内容" :show-action="false"
					v-model="searchKey"></u-search>
				<u-button type="primary" size="mini" :ripple="true" @click="search">查询</u-button>
			</view> -->
      <view v-if="listTypeID == 3 || listTypeID == 4" class="divider"></view>
      <scroll-view
        v-if="dataList.length"
        :scroll-top="scrollTop"
        scroll-y="true"
        :scroll-anchoring="true"
        :scroll-with-animation="false"
        class="scroll-Y"
        @scrolltolower="lower"
        @scroll="scroll"
      >
        <view class="list-area">
          <view
            v-for="(item, index) in dataList"
            :key="index"
            class="list-area-item"
          >
            <view class="list-area-item_header">
              <view class="checkClass">
                <u-checkbox
                  v-if="
                    (item.woState == '待审批' && listTypeID == 2 && approval) ||
                    (listTypeID == 5 &&
                      (item.woState == '待派单' || item.woState == '待接单'))
                  "
                  v-model="item.checked"
                  :name="''"
                  :label-disabled="false"
                ></u-checkbox>
                <text style="flex: 1"
                  >{{ item.woSn }}({{ item.woCategory }})</text
                >
              </view>
              <view v-if="item.woState">{{ item.woState }}</view>
            </view>
            <view v-if="item.woCategory == '抢修工单'">
              {{ item.locationName }}
              {{ item.taskName[0] && item.taskName[0].equName }}
              {{ item.constructContent }}
            </view>
            <view v-else>
              {{ item.locationName }} {{ item.constructArea }}
              {{
                item.taskName
                  .map((item) => item.taskYearName)
                  .filter((item) => item)
                  .toString()
              }}
            </view>
            <view class="time">
              <view>
                <u-icon name="clock"></u-icon>
                <text>{{ item.releaseTime }}</text>
              </view>
              <view>
                <text>
                  {{ returnCHname(item.major, majorOptions) }} |
                  {{ item.woLineName }}
                </text>
              </view>
            </view>
            <view class="footer" @click="jumpDetail(item)">查看详情</view>
          </view>
        </view>
      </scroll-view>
      <u-empty v-else mode="list"></u-empty>
    </view>
    <u-back-top
      @click.native="backTop"
      :scroll-top="old.scrollTop"
      :icon-style="iconStyle"
      :custom-style="customStyle"
    ></u-back-top>
    <MyWorkSearch
      v-show="show_search"
      :typeid="listTypeID"
      :tab="current"
      @closeFull="closeFull"
      :title="'工单查询'"
    >
    </MyWorkSearch>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { PMS_DICT_CONTROLLER, WORK_CONTROLLER } from "../../api/pms";
import MyWorkSearch from "../../components/myWork/myWorkSearch";
import { formatDate, getDayInfo } from "../../utils/utils.js";
export default {
  components: {
    MyWorkSearch,
  },
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      searchKey: "",
      showAction: false,
      customStyle: {
        backgroundColor: "#2979ff",
      },
      iconStyle: {
        color: "#fff",
      },
      dataList: [],
      page: 1,
      workList: [
        {
          name: "过期",
          type: "1",
        },
        {
          name: "一天内",
          type: "2",
        },
        {
          name: "3天内",
          type: "3",
        },
        {
          name: "7 天内",
          type: "4",
        },
      ],
      workNum: [0, 0, 0, 0],
      show_search: false,
      current: 0,
      flog: true,
      search_condition: {},
      filterParm: {
        // major: "",
        // woLine: "",
        // location: "",
        managementOrg: "",
        pageNum: 1,
        pageSize: 20,
      },
      listTypeID: "",
      approval: false,
      historyKey: "",
    };
  },
  computed: {
    ...mapState(["userInfo", "majorOptions", "workProfession"]),
  },
  watch: {},
  onLoad(options) {
    // typeid的值 1，预备工单 2，我的工单，3，历史工单 4，全部工单 5，我发起的工单
    this.listTypeID = options.typeid;
  },
  created() {
    this.filterParm.managementOrg = this.userInfo?.org?.num;
    // this.filterParm.major = this.userInfo?.roles && this.userInfo?.roles[0].major
    if (this.listTypeID == 1) {
      this.change(1);
    } else {
    }
  },
  onShow() {
    this.search_condition.managementOrg = this.userInfo?.org?.num;
    this.initList(this.search_condition);
  },
  onBackPress(e) {
    this.back();
  },
  methods: {
    selectAll() {
      this.dataList = this.dataList.map((item) => {
        return {
          ...item,
          checked: !item.checked,
        };
      });
    },
    returnCHname(value, options) {
      let name;
      let filterArr = this.workProfession.filter((item) => item.code == value);
      filterArr.length ? (name = filterArr[0].value) : (name = value);
      return name;
    },
    debounce(func, delay) {
      let timerId;
      return function (...args) {
        clearTimeout(timerId);
        timerId = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
    deleteOrder() {
      let woState = this.dataList
        .filter((item) => item.checked)
        .map((item) => item.woSn);
      console.log("dataList", woState);
      if (woState.length) {
        this.fetch(
          "delete",
          this.$store.state.baseUrl +
            WORK_CONTROLLER.DELETE_WORK_INFO +
            "/" +
            woState.join(",")
        ).then((res) => {
          console.log(res);
          if (res && res.data == "待接单工单已删除") {
            this.dataList = [];
            this.initList(this.search_condition);
            uni.showToast({
              title: "删除成功",
              icon: "none",
            });
          }
        });
      } else {
        uni.showToast({
          title: "请选择需要删除的单子",
          icon: "none",
        });
      }
    },
    checkOrder(param) {
      let woState = this.dataList
        .filter((item) => item.checked)
        .map((item) => item.woSn);
      console.log("dataList", woState);
      if (woState.length) {
        this.fetch(
          "post",
          this.$store.state.baseUrl + "/api/work/task/audit",
          {
            woSn: woState.toString(),
            message: this.remark ? this.remark : "",
            approveFlag: param == 1 ? true : false,
          },
          false
        ).then((res) => {
          if (res.success) {
            this.dataList = [];
            this.initList(this.search_condition);
            uni.showToast({
              title: "批量审批成功",
              icon: "none",
            });
          } else {
            console.error(res);
            uni.showToast({
              title: "批量审批失败",
              icon: "none",
            });
          }
        });
      } else {
        uni.showToast({
          title: "请选择需要审批的单子",
          icon: "none",
        });
      }
    },
    returnTitle() {
      switch (this.listTypeID) {
        case "1":
          return "预备工单";
          break;
        case "2":
          return "我的工单";
          break;
        case "3":
          return "历史工单";
          break;
        case "4":
          return "全部工单";
          break;
        case "5":
          return "我发起的工单";
          break;
      }
      console.log("sssssssss", typeof this.listTypeID);
    },

    search(value) {
      console.log("historyKey", this.searchKey);
      this.dataList = [];
      this.filterParm.pageNum = 1;
      this.filterParm.constructContent = this.searchKey;
      this.initList(this.search_condition);
    },
    backTop() {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    lower() {
      if (!this.flog)
        return uni.showToast({
          title: "已无最新数据",
          icon: "none",
        });
      this.filterParm.pageNum += 1;
      this.initList2();
    },
    change(index) {
      this.current = index;
      let date = "";
      let diff = 0;
      let params = {
        pageNum: 1,
      };
      if (index == 1) {
        date = new Date().getTime() - 1 * 24 * 60 * 60 * 1000;
        diff = -1;
      }
      if (index == 2) {
        date = new Date().getTime() - 3 * 24 * 60 * 60 * 1000;
        diff = -3;
      }
      if (index == 3) {
        date = new Date().getTime() - 7 * 24 * 60 * 60 * 1000;
        diff = -7;
      }
      if (index == 0) {
        params.overdue = 1;
      }
      if (diff !== 0) {
        params.startTime = getDayInfo(diff) + " 00:00:00";
        params.endTime = getDayInfo(0) + " 23:59:59";
      }

      // this.filterParm.startTime = date ? formatDate(date) : ''
      // this.filterParm.endTime = date ? formatDate(new Date().getTime()) : ''
      this.dataList = [];
      this.initList({
        // date: [, getDayInfo(0) + " 00:00:00"],
        ...params,
        ...this.search_condition,
      });
    },
    closeFull(obj) {
      this.search_condition = obj;
      this.dataList = [];
      this.filterParm.pageNum = 1;
      this.flog = true;
      this.initList(obj);
      this.backTop();
      this.show_search = false;
      this.old.scrollTop = 0;
    },
    back() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
    jumpDetail(item) {
      this.$store.state.productOrderData = item;
      uni.navigateTo({
        url: `/pages/productCenter/workDetail?woSn=${item.woSn}&typeid=${this.listTypeID}`,
      });
    },
    initList2() {
      if (this.listTypeID == 2) {
        let params = {
          pageNum: 1,
          pageSize: 20,
          sortFlag: 2,
          ...this.filterParm,
          ...this.search_condition,
        };
        this.fetch(
          "get",
          this.$store.state.baseUrl + WORK_CONTROLLER.GET_WORKINFO_LIST,
          params,
          true
        ).then((res) => {
          if (res.success && res.data && res.data.content) {
            this.dataList = this.dataList.concat(res.data.content);
            if (this.filterParm.pageNum == res.data.totalPages) {
              this.flog = false;
            } else {
              this.filterParm.pageNum = res.data.number;
            }
            this.dataList.forEach((item) => {
              if (item.woState == "待审批") {
                this.approval = true;
              }
            });
          } else {
            console.error(res);
          }
        });
      } else {
        this.initOther2(this.search_condition);
      }
    },
    initList(obj) {
      // let woLine = this.$store.state.lineIdsSelected;
      console.log(this.listTypeID, obj, "obj");
      let params;
      if (this.listTypeID == 2) {
        params = {
          pageNum: 1,
          pageSize: 20,
          sortFlag: 2,
          ...this.filterParm,
          // woLine: woLine,
          ...obj,
        };
        this.fetch(
          "get",
          this.$store.state.baseUrl + WORK_CONTROLLER.GET_WORKINFO_LIST,
          params,
          true
        ).then((res) => {
          if (res.success && res.data && res.data.content) {
            this.dataList = res.data.content;
            if (this.filterParm.pageNum == res.data.totalPages) {
              this.flog = false;
            } else {
              this.filterParm.pageNum = res.data.number;
            }
            this.dataList.forEach((item) => {
              if (item.woState == "待审批") {
                this.approval = true;
              }
            });
          } else {
            console.error(res);
          }
        });
        return;
      } else {
        this.initOther(obj);
      }
    },
    initOther(obj) {
      let params;
      if (this.listTypeID == 1) {
        params = {
          ...this.filterParm,
          // woLine: woLine,
          sortFlag: 2,
          ...obj,
          // woState: "发布,进行中,准备中,派单,接单",
          woState: "待派单,进行中,准备中,待接单",
          userid: this.getUserId(),
        };
      } else if (this.listTypeID == 3) {
        params = {
          ...this.filterParm,
          // woLine: woLine,
          sortFlag: 2,
          ...obj,
          woState: "已完成",
          userid: this.getUserId(),
          historyQuery: 1,
        };
      } else if (this.listTypeID == 4) {
        params = {
          ...this.filterParm,
          // woLine: woLine,
          sortFlag: 2,
          ...obj,
          // persionid: this.getUserId(),
        };
      } else if (this.listTypeID == 5) {
        params = {
          ...this.filterParm,
          // woLine: woLine,
          sortFlag: 2,
          ...obj,
          startByMe: 1,
          // persionid: this.getUserId(),
        };
      }
      this.fetch(
        "get",
        this.$store.state.baseUrl + WORK_CONTROLLER.GET_ALL_WORKORDER_LIST,
        params,
        true
      ).then((res) => {
        if (res.success && res.data && res.data.content) {
          this.dataList = res.data.content;
          console.log(this.filterParm.pageNum);
          console.log(res.data.totalPages);
          if (this.filterParm.pageNum == res.data.totalPages) {
            this.flog = false;
          } else {
            this.filterParm.pageNum = res.data.number;
          }
        } else {
          console.error(res);
        }
      });
    },
    initOther2(obj) {
      let params;
      if (this.listTypeID == 1) {
        params = {
          ...this.filterParm,
          sortFlag: 2,
          ...obj,
          woState: "待派单,进行中,准备中,待接单",
          userid: this.getUserId(),
        };
      } else if (this.listTypeID == 3) {
        params = {
          ...this.filterParm,
          sortFlag: 2,
          ...obj,
          woState: "已完成",
          userid: this.getUserId(),
          historyQuery: 1,
        };
      } else if (this.listTypeID == 4) {
        params = {
          ...this.filterParm,
          sortFlag: 2,
          ...obj,
        };
      } else if (this.listTypeID == 5) {
        params = {
          ...this.filterParm,
          sortFlag: 2,
          ...obj,
          startByMe: 1,
        };
      }
      this.fetch(
        "get",
        this.$store.state.baseUrl + WORK_CONTROLLER.GET_ALL_WORKORDER_LIST,
        params,
        true
      ).then((res) => {
        if (res.success && res.data && res.data.content) {
          this.dataList = this.dataList.concat(res.data.content);
          if (this.filterParm.pageNum == res.data.totalPages) {
            this.flog = false;
          } else {
            this.filterParm.pageNum = res.data.number;
          }
        } else {
          console.error(res);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
/deep/.u-checkbox__label {
  margin-right: 0px !important;
}

.action {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 10px;
  justify-content: space-around;

  .u-btn {
    width: 32%;
    // flex: 1;
    // margin-right: 10px;
  }
}

.divider {
  border-bottom: 2px solid rgb(242, 242, 242);
}

.search {
  margin: 10px 20px;
  display: flex;
  align-items: center;

  .u-search {
    padding-right: 6px;
  }
}

.content {
  height: 100vh;
  position: fixed;
  width: 100%;

  .ac {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.content_box {
  height: calc(100vh - 132upx);
  display: flex;
  flex-direction: column;
  // padding: 10px 0 ;
}

.app-title {
  .history-icon {
    float: right;

    /deep/.u-icon__icon {
      position: relative;
      top: 8upx !important;
    }
  }
}

.list-area {
  padding: 20rpx;

  .checkClass {
    display: inline-flex;
    flex: 1;
    padding-right: 10px;
  }

  .list-area-item {
    background-color: white;
    padding: 30rpx 20rpx 20rpx;
    margin-bottom: 20rpx;

    &_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 5rpx 0;

      view:nth-child(2) {
        height: 45rpx;
        padding: 0rpx 10rpx;
        float: right;
        color: #fde4a4;
        border: 1rpx solid #fde4a4;
        font-size: 32rpx;
        line-height: 45rpx;
        text-align: center;
        border-radius: 10rpx;
      }

      view:nth-child(1) {
        font-weight: bold;
        font-size: 26rpx;
        // flex: 1;
      }
    }

    > view:nth-of-type(2) {
      margin-top: 8rpx;
      color: #7f7f7f;
      display: -webkit-box;
      /*弹性伸缩盒子模型显示*/
      -webkit-box-orient: vertical;
      /*排列方式*/
      -webkit-line-clamp: 2;
      /*显示文本行数(这里控制多少行隐藏)*/
      overflow: hidden;
      /*溢出隐藏*/
    }
  }
}

.my-work {
  background: #fff;
  margin-bottom: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.my-work > .menu {
  width: 100%;

  /deep/ .u-tab-item {
    width: 25%;
  }
}

.filter {
  width: 160rpx;
  background-color: #fff;
  height: 80rpx;
  font-size: 15px;
  line-height: 80rpx;
  // border-left: 1px solid black;
  margin-left: 5px;
}

.select {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  vertical-align: middle;
}

.crcle {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  border: 1px solid #c8c8c8;
  border-radius: 10rpx;

  display: inline-flex;
  margin: 5px 0rpx;
  padding: 2px;
  max-width: 100%;

  // height: 26rpx;
  .crcle_round {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #c8c8c8;
    margin: 0 5px;
    display: inline-block;
    flex-shrink: 0;
  }

  .crcle_text {
    width: calc(100%);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    color: #c8c8c8;
    margin: 0 5px;
    // padding: 0 5px;
  }
}

.footer {
  margin-top: 10rpx;
  text-align: center;
  color: #2979ff;
}

.time {
  // color:#c8c8c8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  > :nth-child(1) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
  }

  > :nth-child(2) {
    flex: 1;
    width: 0;
    text-align: right;

    text {
      text-align: right;
    }
  }
}

.scroll-Y {
  flex: 1;
  height: 0;
  // height: calc(100% - 140rpx);
}
</style>
